<template>
  <div class="bg">
  <div class="box">
  <el-form :model="changeFrom" status-icon :rules="rules" ref="changeFrom" label-width="100px" class="demo-ruleForm">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input type="password" v-model.number="changeFrom.oldPassword"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="newPassword">
      <el-input type="password" v-model="changeFrom.newPassword" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkNewPassword">
      <el-input type="password" v-model="changeFrom.checkNewPassword" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('changeFrom')">确定</el-button>
      <el-button @click="back">取消</el-button>
    </el-form-item>
  </el-form>
  </div>
  </div>
</template>

<script>
    import axios from "axios";
    import md5 from "js-md5"
    export default {
        name: "changePassword",
      data() {
        let password = /^[a-zA-Z]\w{5,17}$/;
        var validOldPassword = (rule, value, callback) => {
          if(value==''){
            callback(new Error("请输入原密码"));
          }else if(md5(value)==this.$cookies.get("password")){
            callback();
          }else{
            callback(new Error("原密码错误"));
          }

        };
        var validNewPassword = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else if (!password.test(value)) {
            callback(new Error('密码格式以字母开头，长度在6~18之间，只能包含字母、数字和下划线'))
          } else {
            callback();
          }
        };
        var validCheckNewPassword = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.changeFrom.newPassword) {
            callback(new Error('两次输入密码不一致!'));
          } else if (!password.test(value)) {
            callback(new Error('密码格式以字母开头，长度在6~18之间，只能包含字母、数字和下划线'))
          } else {
            callback();
          }
        };
        return {
          changeFrom: {
            account:this.$cookies.get("account"),
            oldPassword: '',
            newPassword: '',
            checkNewPassword: ''
          },
          rules: {
            oldPassword: [
              { validator: validOldPassword, trigger: 'blur' }
            ],
            newPassword: [
              { validator: validNewPassword, trigger: 'blur' }
            ],
            checkNewPassword: [
              { validator: validCheckNewPassword, trigger: 'blur' }
            ]
          }
        };
      },
      methods: {
        submitForm(formName) {
          const _this = this;
          var password =this.changeFrom.newPassword;
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.changeFrom.newPassword=md5(this.changeFrom.newPassword)
              axios.post('http://localhost:8080/changePassword', this.changeFrom)
                .then( (response) =>{
                  _this.$message({
                    type:"success",
                    message:"密码修改成功，请重新登陆"
                    }
                  )
                  _this.$cookies.set("password", password,10000);
                })
              sessionStorage.setItem("land", "false");
              _this.showLandHome();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        back(){
          this.$router.push('/Main');
        },
        showLandHome() {
          if (!(sessionStorage.getItem("land") == "true")) {
            this.$router.push('/login');
          } else {
            // this.$router.push('/Main');
          }
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
</script>

<style scoped>
.box{
  width: 450px;
  height: 450px;
  position: absolute;
  top: 38%;
  left: 32%;
}
  .bg{
    border-radius: 10px;
    width: 1519px;
    height: 746px;
    background: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1987829975,519952476&fm=26&gp=0.jpg") no-repeat;
    background-size:100% 100%;
    position: relative;
  }
</style>
